<template>
  <span>没有防抖的input</span> <input @keyup="query" />
  <br />
  <span>防抖后的input</span> <input @keyup="better_query" />
  <br />
  <br />
  <br />
  <img
    src="https://img01.yzcdn.cn/upload_files/2022/05/09/FtniwlmXIdCRMrFBfEMemJUwsmpc.jpg!middle.jpg"
  />
</template>
<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import { debounce, throttle } from "../utils/utils";
defineProps({
  msg: String,
});
// 防抖

const better_query = debounce((e) => {
  console.log("rquest " + e.target.value);
}, 300);

function query(e) {
  console.log("rquest " + e.target.value);
}

// 节流before
const scroll = (e) => {
  console.log("触发了滚动事件" + e.target.documentElement.scrollTop);
};
// 节流after
const better_scroll = throttle((e) => {
  console.log("触发了滚动事件" + e.target.documentElement.scrollTop);
}, 1000);

onMounted(() => {
  // 节流before
  // document.addEventListener("scroll", scroll);

  // 节流after
  document.addEventListener('scroll', better_scroll )
});
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
